<template>

    <el-container style="height: 700px; border: 1px solid #eee">
        <el-header style="font-size: 30px;background-color: rgb(238, 241, 246)">历史温度情况</el-header>
        <el-main>
            <div id="table">
                <!-- <el-select v-model="typeselect" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="begindate" placeholder="请输入开始日期" style="width: 150px;"></el-input>
                <el-input v-model="enddate" placeholder="请输入结束日期" style="width: 150px;"></el-input>
                <el-button type="primary" @click="submitresult">查找</el-button>
                <el-button type="primary" @click="save">导出数据</el-button>
                <el-button type="primary" @click="read">导入数据</el-button> -->
                <div class="chart-container" id="line">
                </div>
            </div>
            <!-- <el-popover placement="bottom" width="500" trigger="click">
                <div class="chart-container" id="line">
            </div>
                <el-button slot="reference"  @click="submitresult">查询图书</el-button>
            </el-popover> -->
           

        </el-main>
    </el-container>

</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import { setInterval } from 'core-js';
export default {
    data() {
        return {
            createTime: '',
            tableData: [],
            options: [{   //选择类型
                value: '温度',
                label: '温度传感器'
            }, {
                value: '湿度',
                label: '湿度传感器'
            }, {
                value: '光照强度',
                label: '光敏光感器'
            }
            ],
            typeselect: '',
            begindate: '',  //按起始时间查询
            enddate: '',  //按结束时间查询

        }
    }
    ,
    mounted() {  // 在页面加载完成后，初始化图表和获取数据

        this.initChart();

    },
    methods: {

        handleFileSelect(event) {
            // 获取用户选择的文件列表
            const selectedFiles = event.target.files;
            console.log(selectedFiles);
            const reader = new FileReader();
            reader.onload = (e) => {
                // 获取文件内容
                const fileContent = e.target.result;
                console.log('文件内容：', fileContent);
            };

            // 遍历文件列表
            for (let i = 0; i < selectedFiles.length; i++) {
                const file = selectedFiles[i];

                // 创建 FileReader 对象
                const reader = new FileReader();

                // 设置 FileReader 加载完成时的回调函数
                reader.onload = (e) => {
                    // 获取文件内容
                    const fileContent = e.target.result;
                    var option = JSON.parse(fileContent)
                    this.maychart.setOption(option);

                };

                // 读取文件内容
                reader.readAsText(file);

            }
        },
        initChart() {
            // 定义图表配置项
            this.options = {
                title: {
                    text: '历史数据分析'
                },
                //设置鼠标悬停在数据点上时显示的提示框
                tooltip: {
                    trigger: 'axis'
                },
                //设置图例，用于展示不同数据系列的标签，
                legend: {
                    data: ["温度"]
                },
                //设置图表的网格，包括左侧边距、右侧边距、底部边距和是否包含标签等属性
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: [7],
                
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '温度',
                        type: 'line', //改变统计图类型
                        data: []
                    },

                ]
            };
            // 初始化图表实例
            this.maychart = echarts.init(document.getElementById('line'));
            // 使用配置项初始化图表
            this.maychart.setOption(this.options);
        },
        read(){
            axios.get("http://localhost:8888/input")
        },
        save(){
            var  option = this.maychart.getOption()
            var json = JSON.stringify(option)
            console.log(json);
            axios({
                    url:"http://localhost:8888/saveOption",
                    method:'post',
                    data:option
                })
            alert("导出成功！")
        }
    },
    created() {   //是否已进入页面就开始获取数据
      
            // 使用 setInterval 设置定时器
            this.timer = setInterval(() => {
                //   定时向数据库中获取数据
                axios.get("http://localhost:8888/Tlist").then((result) => {
                    console.log(result.data);
                    for (let i = 0; i < 10; i++) {
                        this.options.series[0].data[i] = result.data.data[i].wd;
                        this.options.xAxis.data[i] = result.data.data[i].creatTime;  //纵坐标
                    }
                    console.log(result);
                })
                this.maychart.setOption(this.options);
                console.log('定时器触发');
            }, 1000); // 每隔 1 秒执行一次
    }
};
var i = 1;
</script>
<style>
.chart-container {
    width: 100%;
    height: 400px;
}
</style>
